<template>
  <div class="radarBox" ref="radar" id="radar"></div>
  <div class="title"><span class="dot"></span>是否达标</div>
</template>
<script setup>
// 雷达图
import * as echarts from "echarts/core";
import { TooltipComponent, GridComponent } from "echarts/components";
import { RadarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import { getbridgePortrait } from "../../../utils/apis";
import { ref, defineProps } from "vue";
echarts.use([TooltipComponent, RadarChart, CanvasRenderer, GridComponent]);

const bridgePortrait = ref([]);
const props = defineProps({ bridgeId: String });
// 获取桥梁画像
getbridgePortrait(props.bridgeId).then((res) => {
  if (res.code === 200) {
    bridgePortrait.value.push(Number(res.data[0].collisionResistance)); //抗撞能力
    bridgePortrait.value.push(Number(res.data[0].collisionFacility)); //防撞设施
    bridgePortrait.value.push(Number(res.data[0].markSituation)); //设标情况
    bridgePortrait.value.push(Number(res.data[0].navigationHeight)); //通航净高
    bridgePortrait.value.push(Number(res.data[0].navigationWidth)); //通航净宽
    initChart();
  }
});
const initChart = () => {
  var myChart = echarts.init(document.getElementById("radar"));
  var option;
  myChart.resize();
  var data = Array.from(bridgePortrait.value);
  var indicatorname = [
    "抗撞能力",
    "防撞能力",
    "设标能力",
    "通航净高",
    "通航净宽",
  ];
  var maxdata = [1, 1, 1, 1, 1];
  var mindata = [0, 0, 0, 0, 0];
  function contains(arrays, obj) {
    var i = arrays.length;
    while (i--) {
      if (arrays[i] === obj) {
        return i;
      }
    }
    return false;
  }

  var indicator = [];
  for (var i = 0; i < indicatorname.length; i++) {
    indicator.push({
      name: indicatorname[i],
      max: maxdata[i],
      min: mindata[i],
    });
  }

  function innerdata(i) {
    var innerdata = [];
    innerdata.push(100 - 20 * i);
    return innerdata;
  }

  let optionData = getData(data);

  function getData(data) {
    var res = {
      series: [
        {
          type: "radar",
          symbolSize: 6, //点的大小
          symbol: "circle",
          lineStyle: {
            color: "#266FE8",
            width: 2,
          },
          itemStyle: {
            color: "#266FE8",
          },
          label: {
            show: false,
          },
          data: [
            {
              value: data,
            },
          ],
          z: 100,
        },
      ],
    };
    for (let i = 0; i < data.length; i++) {
      res.series.push({
        type: "radar",
        data: [
          {
            value: innerdata(i),
          },
        ],
        symbol: "none",
        lineStyle: {
          width: 0,
        },
        itemStyle: {
          color: "#fff",
        },
      });
    }
    return res;
  }
  option = {
    backgroundColor: "#fff",
    tooltip: {
      formatter: function () {
        var html = "";
        for (var i = 0; i < data.length; i++) {
          html += `${indicatorname[i]} :${
            data[i] == 1 ? "达标" : "不达标"
          }<br>`;
        }
        return html;
      },
    },
    grid: {
      top: "50px",
      left: "5%",
      right: "5%",
      bottom: "30px",
      backgroundColor: "#fff",
      width: "100%", //图例宽度
      height: "auto", //图例高度
    },
    radar: {
      indicator: indicator,
      splitArea: {
        show: true,
        areaStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "rgba(0,0,0,0.15)",
        },
      },
      // radius: 100, //半径
      radius: ["40", "100"],
      splitNumber: 3, //圈数数量
      axisLine: {
        show: false,
        lineStyle: {
          type: "dashed",
          color: "rgba(0,0,0,0.3)",
        },
      }, //各个点到中心点的线
      axisLabel: {
        show: false,
      },
      name: {
        textStyle: {
          rich: {
            // 文字
            a: {
              fontSize: "14",
              color: "rgba(0,0,0,0.9)",
              align: "left",
              fontWeight: "500",
            },
            b: {
              fontSize: "14",
              align: "left",
              fontWeight: "500",
              color: "#DC0101",
              lineHeight: "30",
            },
            c: {
              fontSize: "14",
              color: "#00C462",
              align: "left",
              lineHeight: "30",
              fontWeight: "500",
            },
          },
        },
        formatter: function (params) {
          var i = contains(indicatorname, params);
          if (data[i] == 1) {
            return "{a|" + params + "}\n" + "{c|" + "达标" + "}";
          } else {
            return "{a|" + params + "}\n" + "{b|" + "不达标" + "}";
          }
        },
      },
    },
    series: optionData.series,
  };
  option && myChart.setOption(option);
};
</script>
<style lang='scss' scoped>
.radarBox {
  height: 381px;
  margin: 0 auto;
  // width: 343px;
  border-radius: 8px 8px 0 0;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
  position: relative;
}
.title {
  position: absolute;
  z-index: 2;
  left: 164px;
  bottom: 34px;
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.9);
  line-height: 22px;
  .dot {
    background: #266fe8;
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    margin-right: 20px;
  }
  .dot::before,
  .dot::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 2px;
    background: #266fe8;
    left: -11px;
    bottom: 50%;
  }
  .dot::after {
    left: 11px;
  }
}
</style>